<template>
  <div class="app-container">
    <x-table ref="pageTable" :list-loading="loading" :config="tableConfig" :data="dataList" @handleEdit="handleEdit">
      <template #vip="row">
        <el-switch v-model="row.vipGrade.vip" @change="updateStatus(row, $event)" />
      </template>
      <x-page-form slot="searchForm" :form="searchForm" :config="searchConfig" @search="fetchData" />
    </x-table>
    <!-- 新增编辑 -->
    <addDialog
      :visible="dialogTye == 'edit' || dialogTye == 'add'"
      :visible-type="dialogTye"
      :model="model"
      @close="onClose"
    />
    <!-- 更新vip -->
    <updateVip :visible="dialogTye == 'updateVip'" :model="model" @close="onClose"></updateVip>
  </div>
</template>

<script>
import updateVip from './components/updateVip.vue'
import addDialog from './components/addDialog.vue'
import { tableConfig, searchConfig } from './config'
import * as axiosApi from './api'

export default {
  components: {
    addDialog,
    updateVip
  },
  data() {
    return {
      loading: false,
      tableConfig,
      searchConfig,
      dataList: [],
      dialogTye: '',
      model: {},
      searchForm: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.fetchData()
    })
  },
  methods: {
    handleEdit({ type, params }) {
      console.log(type);
      switch (type) {
        case 'headerBtn':
          this.dialogTye = params.type
          console.log(params)
          break
        case 'edit':
          console.log(params)
          this.dialogTye = params.editType.type
          this.model = params.row
          if (this.dialogTye === 'delete') {
            this.$confirm('确定要删除此用户吗', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                axiosApi.deleteClientUser(params.row.userNo).then(() => {
                  this.fetchData()
                  this.$message({
                    message: '删除成功'
                  })
                })
              })
              .catch(() => {})
          }else if(this.dialogTye === 'updateVip'){

          }
          break
        case 'pageChange':
          this.fetchData()
          break
        default:
          break
      }
    },
    updateStatus({ userNo }, vip) {
      axiosApi.updateVip(userNo, { vip })
    },
    onClose(update) {
      this.dialogTye = ''
      this.model = {}
      if (update) {
        this.fetchData()
      }
    },
    fetchData() {
      this.listLoading = true
      const params = {
        ...this.$refs.pageTable.pageParams,
        ...this.searchForm
      }
      axiosApi.getClientUserList(params).then(response => {
        this.dataList = response.data.content
        this.$refs.pageTable.totalElements(response.data.totalLength)
        this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
  height: 100%;
}
</style>
